<template>
    <div>
        <div class="top">
            <div class="item">
                <el-input v-model="keyWord" placeholder="请输入关键字" prefix-icon="el-icon-search"></el-input>
            </div>
            <div class="item">
                <span>状态:</span>
                <el-select class="state" v-model="enable" style="width: 100px;">
                    <el-option label="启用" value="1"> </el-option>
                    <el-option label="不启用" value="0"> </el-option>
                </el-select>
            </div>
            <div class="item">
                <el-button :style="{ 'background': '#4065E0', 'color': '#fff', 'margin-right': 20+'px' }" @click="search(topicList)">查询</el-button>
                <el-button :style="{ 'background': '#EEEEEE', 'color': '#333333'}" @click="reset">重置</el-button>
            </div>
        </div>
        <div class="middle">
            <div class="mid-left">
                <div v-if="selected">
                    <span @click="multiple">选择</span> 
                </div>
                <div v-else>
                    <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                    <el-link class="delete" type="danger" :underline="false" @click="delBackground">删除</el-link>
                </div>
                
            </div>
            <el-button :style="{ 'background': '#4065E0', 'color': '#fff' }" @click="addTopic">+ 添加主题</el-button>
        </div>
        <draggable v-model="filteList" class="content" :options = "{animation:500}" @update="datadragEnd">
            <div class="item" v-for="(item) in filteList" :key="item.id">
                <span> {{ item.name }} </span>
                <div class="imgBox">
                    <img :src="item.image" @click="itemClick(item)">
                </div>
                
                <p @click="edit(item)">编辑</p>
                <el-checkbox v-if="showCheckbox" v-model="item.isChecked" @change="statusChange"></el-checkbox>
                <!-- 数据要有isChecked字段 -->
            </div>
        </draggable>
        
        <add-meter-topic :topicName="'添加仪表主题'" :appId="'nng0011'" v-if="addBgVisible" @sendBolean="getBolean" @formState="getMeter"></add-meter-topic>
        <detail-meter-topic v-if="dialogFormVisible" @sendState="getClose" :item="item"></detail-meter-topic>
        <edit-meter-topic v-if="bgEditVisible" @closeDialog="closeDialog" :item="item"></edit-meter-topic>
    </div>
</template>

<script>
import draggable from 'vuedraggable'
import addMeterTopic from '../dialog/AddTopic'
import detailMeterTopic from '../dialog/TopicDetail'
import editMeterTopic from '../dialog/EditTopic'
import { getTopicList, deleteTopic } from 'api/backgroundController/backgroundController'
export default {
    name: 'TopicMeter',
    data() {
        return {
            keyWord: '',
            enable: '1',
            selected: true,
            checkAll: false,
            topicList: [],
            filteList: [],
            showCheckbox: false,
            // 三个dialog
            addBgVisible: false,
            dialogFormVisible: false,
            bgEditVisible: false,
            item: {}
        }
    },
    methods: {
        // 筛选
        search(dataSouce){
           if(dataSouce.length !== 0){
                var _keyword = this.keyWord
                var isActive = parseInt(this.enable)
                this.filteList = dataSouce.filter(item => {
                    if(item.name.indexOf(_keyword) > -1 && item.isActive == isActive){
                        return item
                    }
                })
            }else{
                return
            }
        },
        // 重置
        reset(){
            this.keyWord = ''
            this.enable = '1'
            this.filteList = this.topicList
        },
        // 选择框的状态改变时的change函数
        statusChange(value){
            var num = 0
            this.filteList.forEach((item,index,arr) => {
                if(item.isChecked){
                    num++
                }
                if(num == arr.length){
                    this.checkAll = true
                }else{
                    this.checkAll = false
                }
            })
        },
        // 选择
        multiple(){
            this.selected = false
            this.showCheckbox = !this.showCheckbox
        },
        // 全选
        handleCheckAllChange(){
            this.filteList.forEach(item => {
                item.isChecked = this.checkAll
            })
        },
        // 删除
        delBackground(){
            var bgIdArr = []
            if(this.filteList.length != 0){
                for(var i = this.filteList.length-1; i >= 0; i--){
                    if(this.filteList[i].isChecked){
                        bgIdArr.push(this.filteList[i].themeId)
                        this.filteList.splice(i,1);
                    }
                }
            }
            if(bgIdArr.length != 0){
               deleteTopic(bgIdArr).then(res => {
                    console.log(res)
                })
            }
            this.selected = true
            this.showCheckbox = !this.showCheckbox
        },
        // 拖拽结束
        datadragEnd(evt){
            evt.preventDefault();
            console.log('拖动前的索引 :' + evt.oldIndex)
            console.log('拖动后的索引 :' + evt.newIndex)
        },
        // 主题详情
        itemClick(item){
            this.dialogFormVisible = true
            this.item = item  // 点击项的数据传递给背景详情页面
        },
        getClose(close){
            this.dialogFormVisible = close
        },
        // 添加主题
        addTopic(){
            this.addBgVisible = true
        },
        getBolean(close){
            this.addBgVisible = close
        },
        // 获取添加主题表单的数据并添加到背景数组
        getMeter(item){
            var meterTopic = item
            // this.topicList.push(meterTopic)
            this.filteList.push(meterTopic)
        },
        // 编辑主题
        edit(item){
            this.bgEditVisible = true
            this.item = item
        },
        closeDialog(status){
            this.bgEditVisible = status
        },
        // 请求仪表主题列表
        getList(){
            var appId = 'nng0011'
            getTopicList(appId).then(res => {
                console.log(res)
                if(res.data != null){
                    this.topicList = res.data
                    this.filteList = this.topicList
                }
            })
            .catch(res => {
                this.$message.error(res.resultMsg)
            })
        },
    },
    components: {
        draggable,
        addMeterTopic,
        detailMeterTopic,
        editMeterTopic
    },
    created(){
        this.getList()
    },
    mounted(){
        // 防止火狐浏览器拖拽的时候以新标签页打开
        document.body.ondrop = function (event) {
            event.preventDefault();
            event.stopPropagation();
        }
    }
}
</script>

<style lang="scss" scoped>
.top{
    display: flex;
    justify-content: space-between;
    .item{
    display: flex;
    line-height: 40px;
        span{
            white-space: nowrap;
            padding-right: 10px;
        }
    }
}
.middle{
    text-align: right;
    margin: 30px 0;
    line-height: 40px;
    .mid-left{
        float: left;
        span{
            padding-right: 20px;
            color: #666666;
            cursor: pointer;
            font-size: 14px;
        }
    }
}
.content{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    // align-content: space-around;
    .item{
        position: relative;
        width: 190px;
        height: 260px;
        margin: 0 10px;
        margin-bottom: 10px;
        box-sizing: border-box;
        span{
            position: absolute;
            left: 14px;
            top: 14px;
            color: #ffffff;
            font-size: 10px;
        }
        .imgBox{
            background-color: #000;
            width: 174px;
            height: 230px;
            padding: 7px 0;
            margin: 0 auto;
            box-sizing: border-box;
        }
        img{
            height: 100%;
            width: 100%;
        }
        p{
            position: absolute;
            width: 180px;
            height: 22px;
            line-height: 22px;
            bottom: 2px;
            text-align: center;
            color: #333333;
            background-color: #DDDDDD;
            font-size: 10px;
            border-radius:3px;
            margin: 0 6px;
            box-sizing: border-box;
        }
        
    }
}
</style>
